<script setup lang="ts">
import { computed, reactive, toRaw, ref, watchEffect } from "vue"
import { ElForm, ElFormItem, ElInput, ElCard, ElButton, ElUpload, ElSelect, ElOption, ElMessage } from "element-plus"
import StemImageUpload from "./stem-image-upload.vue"
import { $t } from '@vben/locales';

const props = defineProps<{
  multiple?: boolean
  optionsInit?: Array<{ name: string; content?: string; file?: string; path?: string }> | Array<string>
  modelValue: any
}>()

const emit = defineEmits(['update:modelValue'])

// 初始化题目图片数据
if (!props.modelValue.stemImages) {
  props.modelValue.stemImages = []
}

const stemFiles = reactive({
  file: '',
  path: ''
})

const onStemFiles = (f: any) => {
  const { file } = f
  props.modelValue.stemImg = file.name
  handleUpload(f)
}

const handleUpload = (options: any, stems?: any) => {
  const { file } = options
  stems = stems || stemFiles
  stems.file = file
  stems.path = file?.name
  // 触发响应式更新
  if (stems !== stemFiles) {
    // 对于选项中的图片，需要确保对象引用被更新
    const targetOption = props.modelValue.options.find((opt: any) => opt === stems)
    if (targetOption) {
      targetOption.file = file
      targetOption.path = file.name
    }
  }
}

const delImg = (fileItem: any) => {
  fileItem.path = ''
  fileItem.file = ''
}

const getStemFiles = () => {
  return stemFiles
}

const getData = async () => {
  // 准备数据，包括图片上传
  // await checkUploadImgs()
  return {
    stem: props.modelValue.stem,
    stemImg: props.modelValue.stemImg,
    stemImages: props.modelValue.stemImages,
    answers: props.modelValue.answers,
    analysis: props.modelValue.analysis,
    options: props.modelValue.options
  }
}

const validate = () => {
  // 基本验证逻辑
  if (!props.modelValue.stem?.trim()) {
    return { valid: false, message: $t('questionBank.enterQuestion') }
  }
  if (!props.modelValue.answers || (Array.isArray(props.modelValue.answers) && props.modelValue.answers.length === 0)) {
    return { valid: false, message: $t('questionBank.selectAnswer') }
  }
  return { valid: true }
}

defineExpose({
  stemFiles,
  onStemFiles,
  handleUpload,
  delImg,
  getStemFiles,
  getData,
  validate,
  // checkUploadImgs
})
</script>

<template>
  <div class="base-question">
    <el-form-item :label="$t('questionBank.question')" prop="stem">
      <el-input v-model="modelValue.stem" type="textarea" :rows="4" maxlength="500" show-word-limit />
    </el-form-item>
    <el-form-item :label="$t('questionBank.image')" prop="stemImages">
      <StemImageUpload :stemImages="modelValue.stemImages" @update:stemImages="(v) => modelValue.stemImages = v" />
    </el-form-item>
    <slot name="options"></slot>
    <slot name="answers">
      <el-form-item :label="$t('questionBank.referenceAnswer')" prop="answers">
        <ElSelect v-model="modelValue.answers" clearable :placeholder="$t('questionBank.referenceAnswer')" :multiple="multiple">
          <el-option v-for="item in modelValue.options" :label="item.name" :value="item.name" />
        </ElSelect>
      </el-form-item>
    </slot>
    <el-form-item :label="$t('questionBank.questionAnalysis')" prop="analysis">
      <el-input v-model="modelValue.analysis" type="textarea" :rows="4" maxlength="500" show-word-limit />
    </el-form-item>
  </div>
</template>

<style lang="less" scoped></style>
